#{extends 'main.html' /}	
#{set 'moreScripts'}
#{script 'profile.js'/}
#{script 'resize.js'/}
#{/set}	
<script type="text/javascript">
function closemsg(){
	$('#tempmsg').remove();
	$(".backgr").remove();
}
$(document).ready(function() {
	$("textarea").autoGrow();
	var Temp_Posts="${wallpost.id}";
	var PId=Temp_Posts.replace(/\[/,"");
	var clu=PId.replace(/\]/,"");
	var temp=clu.replace(/\s/g,"");
	var PostsId=temp.split(',');
	function closemsg(){
		$('#tempmsg').remove();
		$(".backgr").remove();
	}
	function ope(ind){
		$('.comment_slide').eq(ind).slideDown("fast");	
	}
	function cl(ind){
		$('.comment_slide').eq(ind).slideUp("fast");		
	}
	$('.up_comment').click(function(){
		var index = $(".up_comment").index(this);
		cl(index);
	});
	$('.down_comment').click(function(){
		var index = $(".down_comment").index(this);
		ope(index);
	});
	$('.comment_add .buttonclass').click(function(){
		var index=$(".comment_add .buttonclass").index(this);
		addcommentajax(index);
	});
	function addcommentajax(ind){
		var comment_text=$('.comment_add textarea').eq(ind).val();
		var postid=PostsId[ind];	
		console.log(postid);
		$.ajax({
			  type	: "GET",
			  url	: "",/*Avelacru indz */
			  data	: {
				  comment	:comment_text,
				  idofpost		:postid,
			  }
		}).done(function(result){
			//console.log(result);
			//window.location.reload();
		})
	}
	$('#post_send').click(function(){
		var text=$("#post_area").val();
		var id="${user.id}";
		if($.trim(text)!="") 
		{
		$.ajax({
			  type	: "GET",
			  url	: "/api/wallpost",
			  data	: {
				  post:text,
				  id	:id,
			  }
		}).done(function(result){
			console.log(result);
			window.location.reload();
		})
		}console.error("text is not written");
	});
	$('#BuToSend').click(function(){
		$("#top_links").
		append('<div class="backgr" style="width: 100%;height: 100%;background-color:black;position:fixed;left: 0;top: 0;opacity:0.3"></div>');
		$("#top_links").
		append('<div id="tempmsg" style="padding:15px;background-color:#b0b0b0;box-shadow: 0 0 10px rgba(0,0,0,0.5);border-radius:5px; width: 250px;position:fixed; left:40%;top:30%" align="center"><h2 class="h2inmsg">Send Messages</h2><textarea placeholder="Some text..." rows="2"class="inputstyle" style="width:240px;; outline: 0;resize:none; overflow:hidden;height:auto;"></textarea><a class="buttonclass" id="Sendmess" style="font-size: 12px;margin-top: 7px;">Send</a><a class="buttonclass" id="CloseSM" style="font-size: 12px;margin-left:10px;margin-top: 7px;">Close</a></div>');
		$("#tempmsg textarea").autoGrow();
	$("#tempmsg #CloseSM").click(function(){
			closemsg();
	});
	$('#Sendmess').click(function(){
		var text=$("#tempmsg textarea").val();
		var to="${user.id}";
		if($.trim(text)!="")
			{
			$.ajax({
				  type	: "GET",
				  url	: "/api/messages/send",
				  data	: {
					  text:text,
					  to	:to,
				  }
			}).done(function( result ){
				if (!result.error) {
					$('#tempmsg').html("<h2 class='h2inmsg'>Message was sent</h2>");
				}
				setTimeout('closemsg()', 1200);
			})
			}else console.error("text is not written");
	});//sendmess 
  });
});
</script>
	<div id="main-content-head">
		<div id="main-content-head-title">
			<b>${user.name}</b>														
		</div>
		<div id="main-content-head-sit">
			online
		</div>
	<div class="cleaner" ></div>
	</div>
	<div id="main-content-profile-left">
				<div id="profile-avatar">
						<img src="/public/DataOfImages/${user.prphoto}" width="250px"/>			
				</div>
					#{if !isMe}
						<div id="profile-actions" style="margin-top: 15px;" align="center">
							<a class="buttonclass" id="BuToSend" style="font-size: 15px;"> Send message</a>
						</div>
					#{/if}

				<div class="profile-friends" id="group">
					<div class="profile-friends-title">
						Members
					</div>
					<div style="width: 209;margin-left: 10px;margin-top: 10px;" align="left">
						#{list items:members, as:'members'}
							<div style="float: left; margin-left: 5px; margin-top: 5px; width: 73.9px">
								<a href="/profile/${members.id}" class="name_of_memb">
									<img src="/public/DataOfImages/${members.prphoto}" style="width: 73.9px ;height: 60px;"/>
									<div style="font-size: xx-small; text-align: center;width: 73.9px;overflow: hidden; height: 12px;">
										${members.name}
									</div>
								</a>
							</div>
						 #{/list}
						 <div class="cleaner"></div>
					</div>
					#{if isMe}
					<span class="more"><a href="/memb" class="walluser">All members</a></span>
					#{/if}
					#{else}
					<span class="more"><a href="/groupprofile/${members.id}/memb" class="walluser">All members</a></span>
					#{/else}
				</div>
			</div>
			<div id="main-content-profile-right">
				<div id="profile-right-info">
					<div id="profile-right-info-top">
						${user.name}
							<span class="more" style="color:black">${user.group}</span>
					</div>
					<div id="profile-right-info-more">
					   <table>
							<tr>
								<td>Birtday:</td>
								<td>${user.day}.${user.month}.${user.year}</td>
							 </tr>
							<tr>
								<td>University:</td>
								<td>SEUA</td>
							</tr>
							<tr>
								<td>mail:</td>
								<td>${user.email}</td>
							</tr>
						</table>
					</div>
				</div>
				<div id="profile-right-photos">
					<div class="profile-right-block-head">
						photos <span class="more"><a href="/profile/${user.id}/photo" style="color:white;" class="walluser">all</a></span>
					</div>
					<div id="profile-right-photos-more" align="center">
						#{list items:photos, as:'photo'}
							<img src="/public/DataOfImages/${photo}"/>
						 #{/list}
						 <div class="cleaner"></div>
					</div>
				</div>
				<div id="profile-right-wall-wrap">
					<div style="background:#989898 ">
						<div class="profile-right-block-head">
							Status
						</div>
						<div style="width: 500px;margin: 0 auto;padding-top: 5px;padding-right: 3px;">
						<span>Publication</span>
						<textarea id="post_area" style="margin:0;padding:0; width:100%;outline: none;outline: 0;resize:none;overflow: hidden;"></textarea>
						<a class="buttonclass" id="post_send" style="float: right;margin-right: 10px; margin-bottom: 5px;" >Post</a>
						 <div class="cleaner"></div>						
						</div>
					</div>
					#{list items:wallpost, as:'temp'}
						<div id="profile-right-wall-post">
							<span>post from <a href="/profile/${temp.fromId}" class="walluser">${temp.Toname}</a></span>		
							<div align="left" style="">											
								<p style="font-size: medium;">${temp.post}</p>
							</div>
					
							<div class="comment_wrap">
								<div class="comment_wrap_head">
									<h5>Comments</h5>
									<div style="height: 18px;line-height: 18px; float: right;">
										<a class="down_comment" href="##" id="comment_action">View</a>
										<a class="up_comment" href="##" id="comment_action">Hide</a>
									</div>
									<div class="cleaner"></div>
								</div>		
								  <div class="comment_slide" style="display: none;">
									<div class="comment_post_add">	<!-- Add comment -->
										<div class="comment_from_user">
											<a href="/profile/}"  class="name_of_memb">
												<img src="/public/images/default_avatar.png" width="40" height="25"/>
												<div style="font-size: xx-small; text-align: center;width: 40px;overflow: hidden; height: 12px;">
													Grigor Grigoryan
												</div>
											</a>
										</div>	
										<div class="comment_add"id="aaa">
											<textarea style="margin:0; width:390px;outline: none;outline: 0;resize:none;overflow: hiden;"></textarea>
											<a class="buttonclass" style="float: right;" id="add_comment_button" >Add Commnet</a>
										</div>
										<div class="cleaner"></div>					
									</div><!-- End of Add comment -->
									<div class="comment_post" style="">
										<div class="comment_from_user">
											<a href="/profile/}"  class="name_of_memb">
												<img src="/public/images/default_avatar.png"/>
												<div style="font-size: xx-small; text-align: center;width: 40px;overflow: hidden; height: 12px;">
													Grigor Grigoryan
												</div>
											</a>
										</div>	
										<div class="comment_text">
											esi pordzna
										</div>
										<a class="close" style="position: absolute;margin-left:430px;margin-top: -15px;" title="Delete"></a>
										<div class="cleaner"></div>					
									</div>
									<div class="comment_post" style="">
										<div class="comment_from_user">
											<a href="/profile/}"  class="name_of_memb">
												<img src="/public/images/default_avatar.png"/>
												<div style="font-size: xx-small; text-align: center;width: 40px;overflow: hidden; height: 12px;">
													Grigor Grigoryan
												</div>
											</a>
										</div>	
										<div class="comment_text">
											esi pordzna
										</div>
										<a class="close" style="position: absolute;margin-left:430px;margin-top: -15px;" title="Delete"></a>
										<div class="cleaner"></div>					
									</div>	
								<div class="cleaner"></div>					
							</div>
						</div>
						</div>
					#{/list}
					#{else}	<div id="profile-right-wall-post"><h3 align="center">wall is empty</h3></div>#{/else}
				</div>
			</div>
<div class="cleaner" ></div>